<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="客户用户">
        <a-form :model="formState">
          <a-row :gutter="24">
            <a-col :span="4">
              <a-form-item label="用户名称">
                <a-input
                  style="width: 100%"
                  v-model:value="formState.nickname"
                  placeholder="输入用户名称"
                />
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="用户账号">
                <a-input
                  style="width: 100%"
                  v-model:value="formState.username"
                  placeholder="输入用户账号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="成长等级">
                <a-select
                  ref="select"
                  v-model:value="formState.growthLevel"
                  style="width: 100%"
                  placeholder="销售类目"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option
                    v-for="item in growthLevelList"
                    :key="item.id"
                    :value="item.id"
                    >{{ item.level }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="用户角色">
                <a-select
                  ref="select"
                  v-model:value="formState.userRole"
                  style="width: 100%"
                  placeholder="排序"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">会员用户</a-select-option>
                  <a-select-option :value="2">普通用户</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="账号状态">
                <a-select
                  ref="select"
                  v-model:value="formState.accountState"
                  style="width: 100%"
                  placeholder="账号状态"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">启用</a-select-option>
                  <a-select-option :value="2">禁用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="登录状态">
                <a-select
                  ref="select"
                  v-model:value="formState.loginState"
                  style="width: 100%"
                  placeholder="登录状态"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">一周前登录</a-select-option>
                  <a-select-option :value="2">二个月前登录</a-select-option>
                  <a-select-option :value="3">三个月前登录</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="排序">
                <a-select
                  ref="select"
                  v-model:value="formState.sort"
                  style="width: 100%"
                  placeholder="排序"
                >
                  <a-select-option :value="0">最新注册用户</a-select-option>
                  <a-select-option :value="1">消费金额最高</a-select-option>
                  <a-select-option :value="2">消费次数最多</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="注册时间">
                <a-range-picker
                  v-model:value="datePicker"
                  @change="onChangeDate"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
          <a-space wrap>
            <a-button type="primary" @click="handleExport">导出</a-button>
          </a-space>
        </div>
      </a-card>

      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="clientsColumns"
          :pagination="pagination"
          @change="handleChangeSize"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'nickName'">
              <a-space>
                <a-avatar :src="record.avatarUrl" size="40" />
                <span>{{ record.nickName }}</span>
              </a-space>
            </template>
            <template v-if="column.key === 'state'">
              <span style="cursor: pointer">{{
                record.state == 2 ? "禁用" : "启用"
              }}</span>
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button @click="handleEdit(record)">查看</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
    <!-- 查看 -->
    <clientsUserDetails ref="clientsUserDetailsRef" />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { clientsColumns } from "./columns.js";
import { getAllUserInfos, exportUsers } from "@/api/userManger";
import { listGrowthConfig } from "@/api/group";
import { exporeFile } from "@/utils/exporeFile";
import clientsUserDetails from "./components/clientsUserDetails.vue";
const total = ref(0);
const pagination = ref({
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  total: total.value,
  showSizeChanger: true,
  pageSizeOptions: ["10", "20", "50", "100"],
  showTotal: () => `共 ${total.value} 条`,
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  nickname: undefined,
  username: undefined,
  growthLevel: undefined,
  userRole: undefined,
  accountState: undefined,
  loginState: undefined,
  sort: undefined,
  startTime: undefined,
  endTime: undefined,
});
const dataSource = ref([]);

function handleSearch() {
  formState.value.page = 1;
  formState.value.pageSize = 10;
  getAllUserInfosList();
}
function handleReset() {
  datePicker.value = null;
  formState.value = {
    page: 1,
    pageSize: 10,
    nickname: undefined,
    username: undefined,
    growthLevel: undefined,
    userRole: undefined,
    accountState: undefined,
    loginState: undefined,
    sort: undefined,
    startTime: undefined,
    endTime: undefined,
  };
  pagination.value.current = 1;
  pagination.value.pageSize = 10;
  getAllUserInfosList();
}
const getAllUserInfosList = async () => {
  const result = await getAllUserInfos(formState.value);
  if (result.code == 200) {
    dataSource.value = result.data.list;
    total.value = result.data.total;
  }
};
const handleExport = async () => {
  const data = await exportUsers(formState.value);
  console.log(data);
  exporeFile("客户用户列表.xls", data);
};
function handleChangeSize(page) {
  formState.value.page = page.current;
  formState.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  pagination.value.pageSize = page.pageSize;
  getAllUserInfosList();
}
// 修改时间
const datePicker = ref(null);
const onChangeDate = (date, dateString) => {
  datePicker.value = date;
  formState.value.startTime = dateString[0];
  formState.value.endTime = dateString[1];
};
// 获取成长等级
const growthLevelList = ref({});
const getGrowthLevelList = () => {
  listGrowthConfig({ page: 1, pageSize: 999 }).then((res) => {
    if (res.code == 200) {
      growthLevelList.value = res.data.list;
    }
  });
};
const clientsUserDetailsRef = ref(null);
const handleEdit = (record) => {
  clientsUserDetailsRef.value.open(record.state, record.userId);
};
onMounted(() => {
  getAllUserInfosList();
  getGrowthLevelList();
});
</script>

<style lang="less">
.img-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}
</style>
